<template>
    <div class="container">
        <el-row class="login-container" v-if="$admin.enable_login">
            <el-col :xs="20" :sm="12" :md="8" :lg="4" class="form-container">
                <el-form ref="form" size="medium" :rules="rules" :model="form" class="login-form" auto-complete="on" label-position="left" @keyup.enter.native="handleLogin">
                    <h3 class="title">User Login</h3>
                    <el-form-item prop="username">
                        <el-input v-model="form.username" name="username" type="text" auto-complete="off" placeholder="username"/>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            :type="pwdType"
                            v-model="form.password"
                            name="password"
                            auto-complete="off"
                            placeholder="password"
                            show-password
                            @keyup.enter.native="handleLogin"/>
                    </el-form-item>
                    <el-form-item prop="code">

                        <el-input v-model="form.code" placeholder="">
                            <el-button slot="append" icon="el-icon-mobile-phone" @click="getVerifyCode" :loading="smsLoading" :type="smsSecond > 0 ? 'info' : 'primary'">{{ sms_btn_text }}</el-button>
                        </el-input>

                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登录</el-button>
                    </el-form-item>
                    <el-form-item v-if="$admin.login_scan">
                        <el-button type="success" style="width:100%;" @click.native.prevent="dialogLoginScan.show=true">微信登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-dialog
                :visible.sync="dialogLoginScan.show"
                :append-to-body="true"
                :close-on-click-modal="false"
                width="300px"
                center>
                <wechat-qrcode v-if="dialogLoginScan.show" @success="loginSuccess" type="login"></wechat-qrcode>
            </el-dialog>
        </el-row>
        <el-row v-else>
            <h1 class="stop-title">本系统已停止服务</h1>
        </el-row>
    </div>
</template>

<script>
import WechatQrcode from './manager/wechat-qrcode'

export default {
    name: 'Login',
    components: {
        WechatQrcode,
    },
    data() {
        return {
            form: {
                username: '',
                password: '',
                code: '',
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: 'blur',
                    },
                    {
                        min: 2,
                        max: 32,
                        message: '长度在2 ~ 32个字符之间',
                        tigger: 'blur',
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        tigger: 'blur',
                    },
                    {
                        min: 3,
                        max: 16,
                        message: '长度在3 ~ 16个字符之间',
                        tigger: 'blur',
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        tigger: 'blur',
                    },
                    {
                        min: 4,
                        max: 6,
                        message: '长度在4 ~ 6个字符之间',
                        tigger: 'blur',
                    }
                ],
            },
            loading: false,
            pwdType: 'password',
            redirect: undefined,

            dialogLoginScan: {
                show: false,
            },

            smsLoading: false,
            smsSecondLimit: 60,
            smsSecond: 0,
            smsInterval: null,
        }
    },
    computed: {
        sms_btn_text () {
            let text = '获取验证码';
            if (this.smsSecond >= this.smsSecondLimit) {
                return text;
            }
            if (this.smsSecond > 0) {
                return '重新发送('+ (this.smsSecondLimit - this.smsSecond) + 's)';
            }
            return text;
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    methods: {
        initCsrf() {
            this.$store.dispatch('backend/CsrfCookie');
        },
        // 登录
        handleLogin() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;

                this.$store.dispatch('manager/Login', this.form).then(res => {
                    this.loading = false;
                    this.loginSuccess();
                }).catch(error => {
                    this.loading = false;
                });
                return false
            })
        },
        loginSuccess() {
            this.dialogLoginScan.show = false;

            this.$message.success('登录成功');
            this.$store.dispatch('manager/Info').then(() => {
                this.$router.push({path: this.redirect || '/'});
            });
        },
        getVerifyCode() {
            if (!this.form.username) return false;

            this.smsLoading = true;
            this.$store.dispatch('manager/SendCode', this.form).then(res => {
                this.$message.success(res.data.message);

                this.smsSecond++;
                this.smsInterval = setInterval(() => {
                    if (this.smsSecond >= this.smsSecondLimit) {
                        this.smsSecond = 0;
                        this.clearSmsInterval();
                        return ;
                    }
                    this.smsSecond++;
                }, 1000)
            }).finally(() => {
                this.smsLoading = false;
            });
        },
        clearSmsInterval() {
            window.clearInterval(this.smsInterval);
        }
    },
    created() {
        this.initCsrf();
    }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.container {
    height: 100%;
    width: 100%;
    background-color: $bg;

    .login-container {
        .form-container {
            margin: 0 auto;
            float: none;
        }

        .login-form {
            width: 100%;
            margin: 120px auto;
        }

        .tips {
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;

            span {
                &:first-of-type {
                    margin-right: 16px;
                }
            }
        }

        .title {
            font-size: 26px;
            font-weight: 400;
            color: $light_gray;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }

    .stop-title {
        color: white;
        text-align: center;
        margin-top: 10vw;
        font-size: 3vw;
    }
}
</style>
